<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">
        // Your access token can be found at: https://ion.cesium.com/tokens.
        // This is the default access token from your ion account

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1YWJiMmUyZC04OTQ2LTQyZDktYjY3Zi03ZjM0NzIzNmM4YjAiLCJpZCI6NzIxNzAsImlhdCI6MTYzNTg0MDczM30.eC3gDDxmMidlA7gWIjFFYJrXPeb9UXdmrgATnwgAsQg';

        // 加载天地图
        let tiandituKey = 'b88bfb160c81dab8d9d20aaa74846360';
        // 天地图影像
        let tiandituImg = new Cesium.UrlTemplateImageryProvider({
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            url: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + tiandituKey
        });
        // 天地图标注
        let tiandituCva = new Cesium.UrlTemplateImageryProvider({
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            url: 'https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + tiandituKey
        });
        let tiandituImgModel = new Cesium.ProviderViewModel({
            name: '天地图',
            iconUrl: Cesium.buildModuleUrl('https://map.tianditu.gov.cn/static/media/tdt_logo.6244f04b7c268b5b35e78c1ec4a277c1.svg'),
            tooltip: '天地图影像和注记',
            creationFunction: function () {
                return [tiandituImg, tiandituCva];
            }
        });

        // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
        const viewer = new Cesium.Viewer('cesiumContainer');

        // 加入天地图layer
        viewer.baseLayerPicker.viewModel.imageryProviderViewModels.unshift(tiandituImgModel);
        // 默认显示天地图
        viewer.baseLayerPicker.viewModel.selectedImagery = tiandituImgModel;
        // 设置初始位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(104.062, 30.628, 2000.0)
        });
    </script>
    </div>
</body>

</html>